即時切換風格功能 前端邏輯實作

JavaScript 是即時切換風格功能的核心，負責處理圖片上傳、風格按鈕的動態生成、與後端 API 的交互，以及結果的展示。這篇文章將詳細介紹 JavaScript 的實作邏輯，幫助你理解每個部分的功能。

功能需求

1. 圖片上傳處理：監聽使用者上傳的圖片，並顯示預覽。
2. 風格按鈕生成：從後端獲取可用風格，並動態生成按鈕。
3. 與後端交互：將圖片與選擇的風格發送到後端，並接收生成的結果。
4. 結果展示：顯示生成的風格化圖片，並處理載入狀態。
5. 錯誤處理：處理圖片未上傳或生成失敗的情況。

前端功能介紹

1. 圖片上傳與預覽

使用者可以上傳圖片，並在頁面上即時預覽上傳的圖片。這部分的功能包括：

監聽圖片上傳事件。
使用 FileReader 讀取圖片並顯示在頁面上。

2. 動態生成風格按鈕

從後端獲取可用的風格列表，並動態生成按鈕，讓使用者可以選擇不同的風格。選中的按鈕會高亮顯示。

3. 發送生成請求

將使用者上傳的圖片和選擇的風格發送到後端，並接收生成的結果圖片。

即時切換風格功能的前端 JavaScript 實作提供了完整的使用者體驗，從圖片上傳、風格選擇到結果展示，實現了與後端的流暢交互。透過動態生成風格按鈕、即時預覽圖片，以及處理載入狀態，這段程式碼讓功能更加直觀且易於使用。未來可以進一步優化使用者體驗，例如增加錯誤提示的友好性或提升載入速度，讓功能更加完善。